"use client";

import { Box, Flex, Image } from "@chakra-ui/react";
import { motion } from "framer-motion";

function Product({ name, image }: { name: string; image: string }) {
  return (
    <Flex
      direction={"column"}
      gap={"1rem"}
      alignItems={"center"}
      className="product-card"
      whileHover={{ y: -5 }}
      as={motion.div}
    >
      <Image src={`/products/${image}`} w={"10rem"} alt="Product image" />
      <Box>{name}</Box>
    </Flex>
  );
}

export default Product;
